include ../../templates/mixins.pug
svg(viewBox='0 0 100 180')
     +each("getSegments( values ) :i")
        g(transform='translate(50,50)')
            polygon(fill='{{ colors[i] }}' on-mouseover='@this.set("selected", i)' on-mouseout='@this.set("selected", null)' opacity='{{ selected === null ? 1 : (selected === i ? 1 : 0.2) }}' points='{{ getSegmentPoints( ., 20, 50 ) }}' )
        g(transform='translate(5,110)' on-mouseover='@this.set("selected", i)' on-mouseout='@this.set("selected", null)' opacity='{{ selected === null ? 1 : (selected === i ? 1 : 0.2) }}')
            rect(transform='translate(0,{{i*10}})' width='5' height='5' style='fill:{{ colors[i] }};stroke-width:0.5;stroke:rgb(0,0,0)')
            text(transform='translate(10,{{i*10+5}})'  font-size='7') {{columnList[i]}} ({{ .["value"] }})
        g(transform='translate(50,58)')
            +if("selected === i")
                text(text-anchor='middle'  style='font-weight: bold; font-family: monospace; font-size: 1.8em;') {{ .["value"] }}
                
style.
      .box {
      position: relative;
      width: 50%;
      float: left;
      margin: 1em;
      }
      .box:after {
      display: block;
      content: '';
      padding-bottom: 80%;
      }
